<template>
  <div class="mobile-view">
    <template v-if="!resultShow">
      <div class="index">
        {{ nowIndex + 1 }} / {{ testData.length }}
        <div class="timer">{{ formatTime(timer) }}</div>
      </div>

      <div class="test-title">我是怎样一个人:</div>
      <!-- 答题内容区域 -->
      <div class="content-view fade-in" v-if="displayValue">
        <van-radio-group v-model="testData[nowIndex].value">
          <van-radio v-for="(item, index) in testData[nowIndex].data" :key="index" :name="item.value"
            >{{ index + 1 }}.{{ item.text }}</van-radio
          >
        </van-radio-group>
      </div>
      <div class="btn-view">
        <!-- <van-button type="primary" class="last-btn" size="small" @click="HandleLast" v-if="nowIndex !== 0">上一题</van-button> -->
        <van-button type="primary" size="small" @click="HandleNext" v-if="nowIndex !== testData.length - 1"
          >下一题</van-button
        >
        <!-- <van-button type="info" size="small" @click="Submit" v-if="nowIndex === testData.length - 1">提 交</van-button> -->
        <van-button type="info" size="small" @click="Submit" v-if="nowIndex === 2">提 交</van-button>
      </div>
    </template>
    <template v-else>
      <div class="result-view" v-if="resultShow">
        <p class="result-name">{{ resultData.name }}</p>
        <p class="result-title">{{ resultData.title }}</p>
        <p class="result-contnet">{{ resultData.contnet }}</p>
        <p class="result-des">{{ resultData.des }}</p>
      </div>
    </template>
  </div>
</template>

<script>
import '@/assets/js/m-fit'
import character from '@/assets/json/character.json'
import characterresult from '@/assets/json/characterresult.json'
import { Toast } from 'vant'
export default {
  data() {
    return {
      radio: '1',
      testData: [],
      nowIndex: 0,
      displayValue: true,
      timer: 0,
      maxKey: '',
      maxValue: 0,
      resultData: '',
      resultShow: false,
    }
  },
  created() {
    const _this = this
    // 对数组以及数组中内容进行打乱随机
    const data = JSON.parse(JSON.stringify(character))
    data.forEach((item) => {
      item.data = _this.shuffleArray(item.data)
    })
    _this.testData = _this.shuffleArray(data)
  },

  mounted() {
    setInterval(() => {
      this.timer++
    }, 1000)
  },
  methods: {
    // 上一题
    HandleLast() {
      this.displayValue = false
      this.nowIndex -= 1
      setTimeout(() => {
        this.displayValue = true
      })
    },

    // 下一题
    HandleNext() {
      const _this = this
      // 下一题前，先检查是否已经填写答案
      if (!_this.testData[_this.nowIndex].value) {
        Toast({
          message: '请填写答案',
          position: 'top',
        })
      } else {
        _this.displayValue = false
        _this.nowIndex += 1
        setTimeout(() => {
          _this.displayValue = true
        })
      }
    },

    // 提交答题
    Submit() {
      // 获取出答案结果
      const data = this.testData.map((item) => ({
        name: this.getTestText(item.value, item.data),
        value: item.value,
      }))

      // 统计每个结果的数量
      const counts = { S: 0, C: 0, I: 0, D: 0 }
      data.forEach((item) => {
        if (item.name in counts) {
          counts[item.name]++
        }
      })

      // 获取最大的属性
      let maxKey = null
      let maxValue = -Infinity
      for (const key in counts) {
        if (counts[key] > maxValue) {
          maxKey = key
          maxValue = counts[key]
        }
      }
      this.maxKey = maxKey
      this.maxValue = maxValue
      // 获取性格数据
      this.resultData = this.getTestResult(maxKey, JSON.parse(JSON.stringify(characterresult)))
      this.resultShow = true
    },

    // 将时间格式化为 hh:mm:ss 的形式
    formatTime(time) {
      let hour = Math.floor(time / 3600)
      let minute = Math.floor((time - hour * 3600) / 60)
      let second = Math.floor(time - hour * 3600 - minute * 60)
      return `${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`
    },

    // 数组打乱随机
    shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[array[i], array[j]] = [array[j], array[i]]
      }
      return array
    },

    // 获取对应结果
    getTestText(value, arr) {
      let text = ''
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value === value) {
          text = arr[i].label
          break
        }
      }
      return text
    },
    // 获取测试结果
    getTestResult(key, arr) {
      let text = ''
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value === key) {
          text = arr[i]
          break
        }
      }
      return text
    },
  },
}
</script>

<style lang="scss" scoped>
.mobile-view {
  font-size: 1.4rem;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.index {
  height: 3.6rem;
  line-height: 3.6rem;
  position: relative;
  text-align: center;
  .timer {
    position: absolute;
    right: 0.5rem;
    top: 0;
  }
}
.btn-view {
  text-align: center;
  .last-btn {
    margin-right: 2rem;
  }
}

::v-deep .van-radio {
  margin-bottom: 2rem;
  align-items: normal;
  text-align: left;
}

.fade-in {
  -webkit-animation: fade-in 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.test-title {
  font-size: 1.4rem;
  font-weight: 600;
  padding-left: 2rem;
  margin-bottom: 2rem;
}
::v-deep .van-radio__icon,
::v-deep .van-radio__label {
  line-height: 1.2;
}
::v-deep .van-radio__icon {
  font-size: 1.6rem;
}
.result-view {
  width: 100%;
  height: 100%;
  color: #303030;
  .result-name {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 1rem 0;
  }
  .result-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  .result-des {
    font-weight: 600;
    margin-top: 0.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .mobile-view {
    width: 960px;
    margin: 0 auto;
  }
}
</style>
